<template>
  <div class="adlist">
    <div style="margin-top: 5px; text-align: center;">
      <b>总费用：</b><span style="color: red;">{{zzhh}}</span><b>总已付：</b><span
      style="color: red;">{{yfkjezz}}</span><b>总剩余：</b><span style="color: red;">{{wfkzz}}</span>
      <br/>
      <el-input v-model="wst" placeholder="材料/工种/位置/品牌/材料备注"></el-input>
      <br/>
      <el-button type="primary" @click="runinsert">新增</el-button>
      <el-button type="info" @click="queryData">查询</el-button>
      <el-button type="info" @click="runback">返回</el-button>
      <br/>
      <hr/>
      <el-button type="info" @click="testyy">录音</el-button>
      <el-button type="info" @click="testend">结束</el-button>
      <el-button type="info" @click="testzh">转换</el-button>
    </div>
    <div class="shenti">
      <div>
        <div class="xxlist" v-for="(item, index) in zxItems" :key="index">
          <ul>
            <li>
              <div class="list_z tzgg">
                <div style="float: left; width: 80%" @click="goDetailgg(item.guid)"><p>{{item.title}}<span
                  v-if="item.dj!=0">（单价：{{item.dj}}）</span><span
                  v-if="item.yfkje!=0">【已付：{{item.yfkje}}】</span><span
                  v-if="item.zh!=0">【总：{{item.zh}}】</span></p></div>
                <div style="float:right;">
                  <el-button type="danger" @click="rundelete(item.guid)">删除</el-button>
                </div>
                <div class="price"><span>{{item.addr}}</span><span>{{item.isfk}}</span></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div style="text-align: center;">
        <b>总费用：</b><span style="color: red;">{{zzhh}}元</span>
        <br/>
        <el-button type="primary" style="width: 100px;" @click="runinsert">新增</el-button>
        <el-button type="info" style="width: 100px;" @click="runback">返回</el-button>
      </div>
    </div>

  </div>

</template>

<script>

  import {
    Search,
    XButton,
    Divider,
    Cell,
    CellBox,
    Group,
    Scroller,
    Swiper,
    SwiperItem,
    Alert,
    TransferDomDirective as TransferDom
  } from 'vux'

  export default {
    components: {
      Search,
      XButton,
      Divider,
      Cell,
      CellBox,
      Alert,
      Group,
      Scroller,
      Swiper,
      SwiperItem
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        msg: 'hello vue',
        tabNumber: 0,
        bTop: "0",
        pi: 1,
        count: 10,
        userGuid: '',
        alertShow: false,
        alertMessage: '',
        userInfo: {accountId1: '',},
        totalRow: 0,
        zxItems: [],//咨询列表
        demoValue: {pullupStatus: ''},
        pullupConfig: {content: '上拉加载更多', downContent: '松开进行加载', upContent: '上拉加载更多', loadingContent: '加载中...'},
        alertMessage: '',
        alerttype: 'info',
        zzh: 0,
        yfkjez: 0,
        wfkz: 0,
        wst: '',
        localId: ''
      }
    },
    computed: {
      zzhh: function () {
        this.zzh = 0;
        for (let i = 0; i < this.zxItems.length; i++) {
          if (this.zxItems[i].zh == '' || this.zxItems[i].zh == null || this.zxItems[i].zh == undefined) {
            this.zzh = this.zzh + 0;
            console.log(this.zxItems[i].zh);
          }
          else {
            this.zzh = this.zzh + parseInt(this.zxItems[i].zh);
          }
        }
        return this.zzh;
      },
      yfkjezz: function () {
        this.yfkjez = 0;
        for (let i = 0; i < this.zxItems.length; i++) {
          if (this.zxItems[i].yfkje == '' || this.zxItems[i].yfkje == null || this.zxItems[i].yfkje == undefined) {
            this.yfkjez = this.yfkjez + 0;
            console.log(this.zxItems[i].yfkje);
          }
          else {
            this.yfkjez = this.yfkjez + parseInt(this.zxItems[i].yfkje);
          }
        }
        return this.yfkjez;
      },
      wfkzz: function () {
        this.wfkz = 0;
        this.wfkz = parseInt(this.zzh) - parseInt(this.yfkjez);
        return this.wfkz;
      },
    },
    created() {
      this.queryData();
      this.yyconfig();
    },
    mounted() {
      this.queryData();
    },
    methods: {
      formatDate: function () {
        const date = new Date();
        var Y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        var H = date.getHours();
        var i = date.getMinutes();
        var s = date.getSeconds();
        if (m < 10) {
          m = '0' + m;
        }
        if (d < 10) {
          d = '0' + d;
        }
        if (H < 10) {
          H = '0' + H;
        }
        if (i < 10) {
          i = '0' + i;
        }
        if (s < 10) {
          s = '0' + s;
        }
        const t = Y + m + d + H + i + s;
        return t;
      },
      IsValidNo: function () {
        var code = "";
        var codeLength = 6;//验证码的长度
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
          'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//随机数
        for (var i = 0; i < codeLength; i++) {
          //循环操作
          var index = Math.floor(Math.random() * 36);//取得随机数的索引（0~35）
          code += random[index];//根据索引取得随机数加到code上
        }
        return code;
      },
      yyconfig: function () {
        let self = this;
        var vformatDate = this.formatDate();
        var vIsValidNo = this.IsValidNo();
        console.log(vformatDate);
        console.log(vIsValidNo);
        var vtoken = '';
        var vticket = '';
        self.axios.get(global.baseApiUrl + "cf/gettoken").then(function (response) {
          console.log(response);
          vtoken = JSON.parse(response.data.data).access_token;
          if (vtoken == undefined || vtoken == '') {
            console.log('vtoken为空');
          }
          else {
            self.axios.get(global.baseApiUrl + "cf/getticket/" + vtoken).then(function (response) {
              console.log(response);
              vticket = JSON.parse(response.data.data).ticket;
              if (vticket == undefined || vticket == '') {
                console.log('vticket为空');
              }
              else {
                var vsigna = {
                  jsapi_ticket: vticket,
                  url: global.qurl
                };
                self.axios.post(global.baseApiUrl + "cf/signature", vsigna).then(function (response) {
                  console.log(response);
                  var vsignature = response.data.signature;
                  vIsValidNo = response.data.nonceStr;
                  vformatDate = response.data.timestamp;
                  if (vsignature == undefined || vsignature == '') {
                    console.log('vsignature为空');
                  }
                  else {
                    console.log(vIsValidNo + ';' + vformatDate);
                    wx.config({
                      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                      appId: global.appid, // 必填，公众号的唯一标识
                      timestamp: vformatDate, // 必填，生成签名的时间戳
                      nonceStr: vIsValidNo, // 必填，生成签名的随机串
                      signature: vsignature,// 必填，签名
                      jsApiList: ['checkJsApi',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone',
                        'hideMenuItems',
                        'showMenuItems',
                        'hideAllNonBaseMenuItem',
                        'showAllNonBaseMenuItem',
                        'translateVoice',
                        'startRecord',
                        'stopRecord',
                        'onVoiceRecordEnd',
                        'playVoice',
                        'onVoicePlayEnd',
                        'pauseVoice',
                        'stopVoice',
                        'uploadVoice',
                        'downloadVoice',
                        'chooseImage',
                        'previewImage',
                        'uploadImage',
                        'downloadImage',
                        'getNetworkType',
                        'openLocation',
                        'getLocation',
                        'hideOptionMenu',
                        'showOptionMenu',
                        'closeWindow',
                        'scanQRCode',
                        'chooseWXPay',
                        'openProductSpecificView',
                        'addCard',
                        'chooseCard',
                        'openCard'] // 必填，需要使用的JS接口列表
                    });
                    wx.ready(function () {
                      // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
                      // 所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
                      // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                      console.log('ready开始');
                    });
                    wx.error(function (res) {
                      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
                      // 也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                      console.log(res);
                    });
                  }
                })
              }
            }).catch(function (response) {
              console.log('获取ticket报错信息如下');
              console.log(response);
              return;
            });
          }
        }).catch(function (response) {
          console.log('获取token报错信息如下');
          console.log(response);
          return;
        });
      },
      testyy: function () {
        console.log('语音开始');
        let self = this;
        wx.startRecord({
          cancel: function () {
            alert('用户拒绝授权录音');
          }
        });
      },
      testend: function () {
        console.log('语音结束');
        let self = this;
        wx.stopRecord({
          success: function (res) {
            self.localId = res.localId;
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
      },
      testzh: function () {
        let self = this;
        if (self.localId == '') {
          alert('请先使用 startRecord 接口录制一段声音');
          return;
        }
        wx.translateVoice({
          localId: self.localId,
          complete: function (res) {
            if (res.hasOwnProperty('translateResult')) {
              alert('识别结果：' + res.translateResult);
            } else {
              alert('无法识别');
            }
          }
        });
      },
      goDetailgg: function (guid) {
        let self = this;
        self.$router.push('/zxxx/InfoDetail/' + guid);
      },
      queryData: function () {
        let self = this;
        let urlget = '';
        if (self.wst == '' || self.wst == null || self.wst == undefined) {
          urlget = global.baseApiUrl + '/ZXXX/selectZInfo';
        }
        else {
          urlget = global.baseApiUrl + '/ZXXX/selectZInfowst?wst=' + self.wst;
        }
        self.axios.get(urlget).then(function (response) {
          console.log(response);
          self.zxItems = [];
          if (response.data.data.length > 0) {
            let d = response.data.data;
            for (let i = 0; i < d.length; i++) {
              let isfkname = '已付款';
              if (d[i].isfk == '0') {
                isfkname = '未付款';
              }
              if (d[i].isfk == '2') {
                isfkname = '付款中';
              }
              var row = {
                title: d[i].cname,
                isfk: isfkname,
                addr: d[i].addr,
                guid: d[i].guid,
                dj: d[i].dj,
                zh: d[i].zh,
                yfkje: d[i].yfkje,
              }
              self.zxItems.push(row);
            }
          }
        }).catch(function (response) {
          console.log(response);
        });
      },
      load_yhf: function () {
        setTimeout(() => {
          //1.先截取原生传入的userGuid
          let self = this;
          self.axios.get(global.baseApiUrl + '/ZXXX/selectZInfo').then(function (response) {
            console.log("-----222222-------")
            console.log(response)
            self.zxItems = [];
            if (response.data.data.list > 0) {
              let d = response.data.data;
              for (let i = 0; i < d.length; i++) {
                var row = {
                  title: d[i].cname,
                  isfk: d[i].isfk,
                  addr: d[i].addr,
                  guid: d[i].guid,
                }
                self.zxItems.push(row)
              }
            }
            self.pi = self.pi + 1;
            self.totalRow = response.data.data.totalRow;
            if (self.totalRow == 0 || self.totalRow < self.count) {
              setTimeout(() => {
                self.demoValue.pullupStatus = 'disabled'
              }, 100)
            }
          }).catch(function (response) {
            console.log(response);
          });
          setTimeout(() => {
            this.demoValue.pullupStatus = 'default'
          }, 100)
          if (this.pi * this.count >= this.totalRow) { // unload plugin
            setTimeout(() => {
              this.demoValue.pullupStatus = 'disabled'
            }, 100)
          }
        }, 2000)
      },
      runinsert: function () {
        this.$router.replace({path: '/zxxx/InfoCreate'});
      },
      runback: function () {
        this.$router.replace({path: '/'});
      },
      rundelete: function (guid) {
        if (confirm("确认要删除？") == true) {
          console.log(guid);
          let self = this;
          self.axios.get(global.baseApiUrl + '/ZXXX/deleteZInfo/' + guid).then(function (response) {
            console.log(response);
          });
          self.axios.get(global.baseApiUrl + '/ZXXX/deleteZConfiginfo/' + guid).then(function (response) {
            console.log(response);
          });
          self.queryData();
          _self.alerttype = "success";
          _self.alertMessage = "保存成功";
          _self.message();
        }
      },
      message() {
        this.$message({
          type: this.alerttype,
          message: `消息: ${ this.alertMessage }`
        });
      }
    }
  }
</script>
<style type="text/css" scoped>
  .no_contant {
    width: 100%;
    font-size: 16px;
    color: #aaa;
    text-align: center;
    line-height: 35px;
    padding: 10px 0;
  }

  .adlist {
    width: 100%;
    height: 100%;
    float: left;
  }

  .adlist .dingbu {
    width: 100%;
    height: 46px;
    float: left;
    position: fixed;
    z-index: 150
  }

  .adlist .dingbu .top {
    width: 100%;
    height: 46px;
    float: left;
    background: #FFFFFF;
    position: relative;
    z-index: 100;
  }

  .adlist .dingbu .top .fh_jt {
    width: 46px;
    height: 46px;
    float: left;
    line-height: 46px;
    background: #3773d2;
  }

  .adlist .dingbu .top .fh_jt img {
    width: 30px;
    height: 30px;
    float: left;
    margin: 6px;
  }

  .adlist .dingbu .top .top_an {
    width: 100%;
    height: 46px;
    float: left;
    line-height: 46px;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    right: 0px;
  }

  .adlist .shenti {
    width: 100%;
    height: 100%;
    float: left;
    box-sizing: border-box;
  }

  /*background: #F2F2F2;*/
  .adlist .shenti .xxlist {
    width: 100%;
    float: left;
    padding: 0 10px;
    box-sizing: border-box;
    background: #ffffff;
  }

  .adlist .shenti .xxlist:last-child ul li {
    border-bottom: none;
  }

  .adlist .shenti .xxlist ul {
    width: 100%;
    float: left;
  }

  .adlist .shenti .xxlist ul li {
    width: 100%;
    height: 86px;
    float: left;
    position: relative;
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #dadada;
  }

  .adlist .shenti .xxlist ul li .list_z {
    width: 100%;
    height: 80px;
    float: left;
    padding-right: 110px;
    box-sizing: border-box;
  }

  .adlist .shenti .xxlist ul li .list_z.tzgg {
    padding-right: 0px;
  }

  .adlist .shenti .xxlist ul li .list_z p {
    width: 100%;
    height: 46px;
    float: left;
    line-height: 22px;
    display: block;
    font-size: 16px;
    color: #000000;
    margin: 0;
    overflow: hidden;
  }

  .adlist .shenti .xxlist ul li .list_z .price {
    width: 100%;
    height: 20px;
    float: left;
  }

  .adlist .shenti .xxlist ul li .list_z .price span:nth-child(1) {
    height: 20px;
    float: left;
    line-height: 25px;
    color: #A6A6A6;
    font-size: 12px;
  }

  .adlist .shenti .xxlist ul li .list_z .price span:nth-child(2) {
    height: 20px;
    float: right;
    line-height: 25px;
    font-size: 10px;
    color: #A6A6A6;
  }

  .adlist .shenti .xxlist ul li .picture {
    width: 100px;
    height: 66px;
    float: right;
    position: absolute;
    top: 10px;
    right: 0px;
  }

  .adlist .shenti .xxlist ul li .picture img {
    width: 100%;
    height: 100%;
  }

  .adlist .jzgg {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    padding: 5px;
  }

  .adlist .jzgg img {
    width: 18px;
    height: 18px;
    display: inline-block;
  }

  .adlist .jzgg p {
    width: 80px;
    height: 20px;
    line-height: 20px;
    margin: 0;
    display: inline-block;
    font-size: 12px;
    color: #B0B0B0;
    position: relative;
  }

  .adlist .jzgg p span {
    width: 100px;
    height: 20px;
    line-height: 22px;
    font-size: 12px;
    color: #B0B0B0;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
  }

  .adlist .jzgg1 {
    width: 100%;
    height: 30px;
    float: left;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    color: #B0B0B0;
  }

  .geng_duo {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: none;
    z-index: 100;
    position: fixed;
    bottom: 10px;
    right: 10px;
  }

  .geng_duo img {
    width: 100%;
    height: 100%;
  }

  /*滑动图片区*/
  .datu {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
    background: url(../../../static/img/ios.png) no-repeat;
    background-size: 100% 100%;
  }

  .swiper-wrapper {
    width: 100%;
    height: 180px;
    float: left;
  }

  .swiper-slide {
    float: left;
    position: relative;
    width: 100%
  }

  .swiper-slide img {
    width: 100%;
    height: 180px;
  }

  .swiper-slide p {
    display: block;
    margin: 0;
    width: 100%;
    height: 26px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .swiper-slide p span {
    display: block;
    float: right;
    width: 75%;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #FFFFFF;
    text-align: right;
    margin-right: 2%;
  }

  /*动态圆点*/
  .pagination {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 26px;
    width: 100%;
    z-index: 50;
  }

  .pagination .swiper-pagination-switch {
    float: left;
    width: 6px;
    height: 6px;
    margin-left: 2%;
    background: #FFFFFF;
    border-radius: 100%;
    margin-top: 10px;
  }

  .pagination .swiper-active-switch {
    width: 6px;
    height: 6px;
    background: #3091e3;
    border-radius: 100%;
  }


</style>
<style type="text/css">
  .adlist .dingbu .top .vux-tab {
    height: 46px;
  }

  .adlist .shenti .vux-slider {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .adlist .shenti .vux-slider > .vux-swiper {
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>


